<template>
	<view class="topbg pad-30">
		<up-navbar bgColor="#12be98" :titleStyle="{ color: '#fff' }" :title="$t('market_tabbar')" placeholder
			leftIcon=""></up-navbar>
		<view class="robot-box mar-top-20">
			<view class="robot-card bg_color_fff radius20">
				<view class="pad-30 centerY barbg">
					<image class="robot-img" src="../../static/image/robot.png" mode=""></image>
					<view class="mar-left-10 font-28 color-fff">
						{{$t('my.you_currently_have')}} <text>{{robotsNumber}}</text> {{$t('my.the_robot_working')}}
					</view>
				</view>
				<view class="robot-body pad-30">
					<view class="centerY mar-bottom-10">
						<image class="icon" src="../../static/image/icon1.png" mode=""></image>
						<view class="mar-left-10 font-26 color_929292">
							{{$t('home.current_robot_level')}}：<text
								class="color_edad14">{{highestPriceProduct?.title || ""}}</text>
						</view>
					</view>
					<view class="centerY mar-bottom-10">
						<image class="icon" src="../../static/image/icon1.png" mode=""></image>
						<view class="mar-left-10 font-26 color_929292">
							{{$t('home.validity_period')}}：<text
								class="color_edad14">{{highestPriceProduct?.valid_days || "0"}}
								{{$t('home.day')}}</text>
						</view>
					</view>
					<view class="centerY mar-bottom-10">
						<image class="icon" src="../../static/image/icon1.png" mode=""></image>
						<view class="mar-left-10 font-26 color_929292">
							{{$t('home.status')}}：

							<text v-if="highestPriceProduct?.valid_seconds_now <= 0"
								class="color_edad14">{{$t('my.expired')}}</text>
							<text class="color_edad14"
								v-else-if="highestPriceProduct?.start_status == 1">{{$t('my.in_progress')}}</text>
							<text class="color_edad14"
								v-else-if="highestPriceProduct?.start_status == 2">{{$t('my.free')}}</text>
						</view>
					</view>
					<view class="centerY mar-bottom-10">
						<image class="icon" src="../../static/image/icon1.png" mode=""></image>
						<view class="mar-left-10 font-26 color_929292">
							{{$t('home.order_price')}}：<text
								class="color_edad14">{{highestPriceProduct?.settle_fund || "0"}}USDT</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 		<view class="scroll-box bg_color_fff mar-top-40">
			<up-scroll-list :indicator="false">
				<view v-for="(item, index) in list" :key="index">
					<image class="scroll-image mar-right-30" :src="item.thumb"></image>
				</view>
			</up-scroll-list>
		</view> -->

		<!-- list -->
		<view class="list-box mar-top-30 bg_color_fff radius20">
			<view class="list pad-30" v-for="item in coinList" :key="item.symbol">
				<view class="betweenX">
					<view class="centerY min-widthB30">
						<image class="rec-icon" :src="item.logo_url" mode="" />
						<view class="mar-left-10">
							<view class="font-28">{{ item.symbol }}</view>
							<!-- <view class="font-24 color_929292">2024-04-28 19:20:02</view> -->
						</view>
					</view>
					<view class="flex-w centerX">
						<text class="font-26">{{ item.USDT_price }}</text>
					</view>
					<view class="betweenX centerY widthB30">
						<!-- 	<view class="mar-right-60">
							<image class="icon-image" src="/static/image/rise.png"></image>
						</view> -->
						<view class="font-24 text-right widthB100">
							<view :class="[Number(item.USDT_change) > 0 ? 'color_01b176' : 'color_DD4A68']">
								{{ item.USDT_change }}%
							</view>
							<!-- <view>收益</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

<!-- 		<view class="list-box mar-top-30 bg_color_fff radius20">
			<view class="list pad-30" v-for="item in coinList" :key="item.symbol">
				<view class="betweenX">
					<view class="centerY min-widthB30">
						<image class="rec-icon" :src="item.logo_url" mode="" />
						<view class="mar-left-10">
							<view class="font-28">{{ item.symbol }}</view>
							<view class="font-24 color_929292">2024-04-28 19:20:02</view>
						</view>
					</view>
					<view class="flex-w centerX">
						<image v-if="Number(item.USDT_change) >= 0" class="wave-icon" src="/static/image/rise.png"
							mode="" />
						<image v-else src="/static/image/decline.png" class="wave-icon" mode="" />
					</view>
					<view class="betweenX centerY widthB30">
						<view class="font-24 text-right widthB100">
							<view :class="[Number(item.USDT_change) > 0 ? 'color_01b176' : 'color_DD4A68']">
								{{(Number(item.USDT_price) * Math.abs((Number(item.USDT_change)) / 100)).toFixed(6) }}
							</view>
							<view class="font-22 color_929292">{{$t('home.income')}}</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
	<robot></robot>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		rankingCoin
	} from '@/api/index'
	import {
		pledgeRobotAllOfOwner
	} from '@/api/user'

	const list = reactive([{
			thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
		},
		{
			thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
		}
	]);

	const timer = ref(0);
	const coinList = ref([])
	const robotsNumber = ref(0)
	const highestPriceProduct = ref({})

	// 获取启动的机器人
	const getPledgeRobot = async () => {
		const res = await pledgeRobotAllOfOwner({})
		if (res.code != 200 || res.data.lists.length <= 0) return;
		robotsNumber.value = res.data.lists.filter(item => item.valid_seconds_now > 0 && item.start_status == 1)
			.length
		// 使用 reduce 方法找出价格最高的商品
		highestPriceProduct.value = res.data.lists.reduce((prev, current) => {
			return (prev.price > current.price) ? prev : current;
		});
	}

	// 倒计时每多少秒执行一次
	const startTimer = () => {
		timer.value = setInterval(() => {
			// 每20秒调用一次的方法
			getData();
		}, 5000); // 20秒，单位是毫秒
	}

	const getData = async () => {
		const res = await rankingCoin()
		coinList.value = res.data.lists
	}

	onShow(() => {
		getPledgeRobot()
		startTimer()
	})

	onLoad(() => {
		getData()
	})

	onHide(() => {
		clearInterval(timer.value); // 停止定时器
	})
</script>

<style scoped lang="scss">
	page {
		background: #f5f6fa;
	}

	.wave-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.topbg {
		background: url('/static/image/topbg.png') no-repeat;
		background-size: 100% 470rpx;
		width: 100%;
	}

	.u-scroll-list {
		padding: 0;
	}

	.scroll-box {
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		overflow: hidden;

		.scroll-image {
			display: block;
			width: 120rpx;
			height: 30rpx;
		}
	}

	.robot-box {
		.robot-card {
			box-shadow: 0 .9662vw 2.8986vw rgba(33, 48, 87, .14);
		}

		.barbg {
			background: url('/static/image/barbg.png') no-repeat;
			background-size: 100% 100%;
			width: 100%;
		}

		.robot-img {
			width: 50rpx;
			height: 50rpx;
		}

		.icon {
			width: 30rpx;
			height: 30rpx;
		}

	}

	.list-box {
		box-shadow: 0 .9662vw 2.8986vw rgba(33, 48, 87, .14);

		.list {
			border-bottom: 1rpx solid #f0f0f0;
		}

		.rec-icon {
			width: 60rpx;
			height: 60rpx;
		}

		.icon-image {
			width: 28rpx;
			height: 28rpx;
		}

	}
</style>